import React, { Component } from 'react'
import { NavBar, Carousel, Flex } from "antd-mobile";
import "./index.scss"
import SearchInput from "../SearchInput/SearchInput"
import { withRouter } from "react-router-dom";
import 'lib-flexible'
import myaxios from "../../utils/myaxios"
import axios from "axios"
class index extends Component {
  state = {
    swiperList: [],
    imgHeight: 170,
    catitems: [], //首页分类数据
    productData: [], //图片列表数据
  };
  //轮播图点击事件
  handleSwiperClick = (goods_id) => {
    this.props.history.push("/goodDetail/"+ goods_id);
  };
  //导航图片的点击
  handleCatItemClick = (params) => {
    this.props.history.push("/category");
  };
  //图片列表点击
  handleImageClick =(params) => {
      this.props.history.push("/goodList/query='123'")
  }
  
  componentDidMount() {
    myaxios
      .get("home/swiperdata")
      .then((res) => {
        this.setState({
          swiperList: res,
        });
      })
      .catch((err) => console.log(err));
    //首页导航的数据
    myaxios.get("home/catitems").then((res) => {
      this.setState({
        catitems: res,
      });
    });
    //图片列表数据
    myaxios.get("home/floordata").then((res) => {
      console.log(res);
      this.setState({
        productData: res,
      });
    });
  }
  render() {
    return (
      <div className="yg-index">
        <div className="yg-index-nav">
          <NavBar className="index-nav">优购商城</NavBar>
        </div>
        {/* 搜索框开始 */}
        <div className="yg-index-search">
          <SearchInput></SearchInput>
        </div>
        {/* 搜索框结束 */}
        {/* 首页轮播图开始 */}
        <div className="yg-index-swiper">
          <Carousel autoplay={true} infinite>
            {this.state.swiperList.map((val) => (
              <div
                onClick={this.handleSwiperClick.bind(this, val.goods_id)}
                key={val.goods_id}
                style={{
                  display: "inline-block",
                  width: "100%",
                  height: this.state.imgHeight,
                }}
              >
                <img
                  src={val.image_src}
                  alt=""
                  style={{ width: "100%", verticalAlign: "top" }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event("resize"));
                    this.setState({ imgHeight: "auto" });
                  }}
                />
              </div>
            ))}
          </Carousel>
        </div>
        {/* 首页轮播图结束 */}
        {/* 首页分类导航开始 */}
        <div className="yg-index-catitems">
          <div className="catitems-item">
            <Flex>
              {this.state.catitems.map((val) => {
                return (
                  <Flex.Item
                    key={val.image_src}
                    onClick={this.handleCatItemClick}
                  >
                    <img src={val.image_src} alt="" />
                  </Flex.Item>
                );
              })}
            </Flex>
          </div>
        </div>
        {/* 首页分类导航结束 */}
        {/* 首页图片列表开始 */}
        <div className="yg-index-productData">
          {this.state.productData.map((v) => {
            return (
              <div key={v.floor_title.image_src} className="productData-item">
                {/* 标题开始 */}
                <div className="product-title">
                  <img src={v.floor_title.image_src} />
                </div>
                {/* 标题结束 */}
                {/* 图片列表开始 */}
                <div className="product-image-list">
                  {v.product_list.map((v1) => {
                    return (
                      <div
                        onClick={this.handleImageClick}
                        className="image-list-item"
                        key={v1.image_src}
                      >
                        <img src={v1.image_src} />
                      </div>
                    );
                  })}
                </div>
                {/* 图片列表结束 */}
              </div>
            );
          })}
        </div>
        {/* 首页图片列表结束 */}
      </div>
    );
  }
}
export default  withRouter(index)